<template>
  <div>
<div id="bo">
<p>查询</p>
</div>
    <div id="co">
      搜索：<el-input class="ww" @blur="ff()" v-model="input" placeholder="请输入员工id"></el-input>&emsp;
      <el-input @blur="fg()" class="ww" v-model="num" placeholder="请输入订单号"></el-input>
        <div class="block">
    <span class="demonstration">时间：</span>
   <el-date-picker
      type="datetimerange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      align="right">
    </el-date-picker>&emsp;

    <el-select v-model="value" placeholder="请选择">
  <el-option
    v-for="item in arr"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>
<el-select v-model="value" placeholder="请选择">
  <el-option
    v-for="(v,i) in arr" :key="i"
    :label="v.adminId"
    :value="v.detailsDate">
  </el-option>
</el-select>
    </div>
  
</div>
<div id="bo">
<p>明细数据</p>
</div>
<el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="adminId"
      label="序号"
      width="150">
    </el-table-column>
    <el-table-column
      prop="name"
      label="菜品名称"
      width="120">
    </el-table-column>
    <el-table-column
      prop="orderId"
      label="菜品编号"
      width="120">
    </el-table-column>
    <el-table-column
      prop="detailsDate"
      label="下单时间"
      width="120">
    </el-table-column>
    <el-table-column
      prop="detailsMoney"
      label="单价"
      width="300">
    </el-table-column>
    <el-table-column
      prop="orderNote"
      label="用户名"
      width="120">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
<el-button type="text" @click="dialogFormVisible = true"  v-on:click="handleClick(scope.row)">打开</el-button>


      </template>

    </el-table-column>

  </el-table>
  <el-dialog class="er" title="收货地址" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="活动名称" :label-width="formLabelWidth">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
  </div>
</el-dialog>
<div>

  <div class="block">
      <!-- <span class="demonstration">完整功能</span> -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"   :current-page="currentPage4"
        :page-sizes="[5, 10, 20, 40]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

  </div>
  
</div>
</template>

<script>
import {qi,findbyadmin,findallbyid} from '@/apis/zhaowenbo/zhaowenbo.js'
export default {
 
    data() {
      return {
        current:1,
        pagesize:10,
        gridData: [{}],
        dialogTableVisible: false,
        dialogFormVisible: false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          total:0,
          desc: ''
        },
        formLabelWidth: '120px',
        tableDataa:[{}],
        tableData: [{}],
          boll:false ,
          value: '', 
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4,
        input: '',
        num:''
      }     
    },
  mounted(){
    this.xuan()
  },
    methods: {
      xuan(){
      qi().then((ok) => {
      console.log(ok);
      this.tableDataa = ok.data.data.records
      this.tableData = ok.data.data.records.slice((this.current-1)*this.pagesize,this.current*this.pagesize)
      this.total= this.tableDataa.length
    })
    },
      handleClick(row){
        console.log(row);
      },
      ff(){
        findbyadmin(this.value,this.current,this.pagesize).then((ok)=>{
          console.log(ok);
        })
      },
      fg(){
        findallbyid().then((ok)=>{
          console.log(ok);
        })
      },
      // deleteRow(index, rows) {
      //   rows.splice(index, 1);
      // },
      fun(){
      this.boll=true  
      },
      fn(){
          this.boll=false
      },
      handleSizeChange(val) {
      console.log(`一页个数: ${val}`);
      this.pagesize=val
      console.log( this.current);
       console.log(val);
      console.log(this.pagesize);
      qi().then((ok)=>{
        
        console.log(this.pagesize);
        console.log(ok);
        this.tableData = ok.data.data.records.slice((this.current-1)*this.pagesize,this.current*this.pagesize)
      })
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.current=val
      qi().then((ok)=>{
        
        console.log(this.pagesize);
        console.log(ok);
        this.tableData = ok.data.data.records.slice((this.current-1)*this.pagesize,this.current*this.pagesize)
      })
    },     
    },        
}
</script>

<style scoped>
#bo{
margin-top: 40px;
width:100%;
height: 70px;
background-color: rgb(220, 220, 220);
line-height: 70px;
border: 1px solid;

}
#bc{
width:100%;
height: 70px;
background-color: rgb(220, 220, 220);
line-height: 70px;
border: 1px solid;

}
.ww{
  width:300px;
  display: block;   
}
#co{
    height: 201px;
    display: flex;
    width:100%;
    border: 1px solid;
    /* padding-top: 40px;
    padding-bottom: 40px;
    border-top: 0;
    margin-bottom: 20px; */
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
align-content: space-around;
/* border-bottom: 0px; */
}
.el-pagination{
    width:300px;
    margin: 0 300px;

}
#ee{
  width:100%;
  height:100px;
}
</style>
